<template>
  <div>
    <div style="width: 15rem; height: 2rem; background: #f00" />
    <two-bedroom>
      <!--主卧使用默认插槽-->
      <div>
        <span style="font-size: 2rem">热水器，电脑，电视机</span>
        <div>放一个衣柜，老婆的衣服太多了</div>
        <span>算了，还是放一个电脑桌吧，还要写bug</span>
      </div>
      <!--次卧，通过v-slot:secondard 可以指定使用哪一个具名插槽， v-slot:secondard 也可以简写为 #secondard-->
      <template v-slot:secondard>
        <div>
          <span>父母要住，放一个硬一点的床，软床对腰不好</span>
          <div>放一个衣柜</div>
        </div>
      </template>

      <!--卫生间插槽，通过v-slot="scope"可以获取组件内部通过v-bind传的值-->
      <template v-slot:toilet="scope">
        <!--判断是否可以放洗衣机-->
        <span v-if="scope.washer">这里放洗衣机</span>
      </template>
    </two-bedroom>

    <second-hand-house>
      <!--主卧使用默认插槽，只装修主卧-->
      <div>
        <span>放一个大床，要结婚了，嘿嘿嘿</span>
        <div>放一个衣柜，老婆的衣服太多了</div>
        <span>算了，还是放一个电脑桌吧，还要写bug</span>
      </div>
    </second-hand-house>
  </div>
</template>

<script>
import TwoBedroom from './two-bedroom'
import SecondHandHouse from './second-hand-house'
export default {
  components: {
    TwoBedroom,
    SecondHandHouse
  }
}
</script>
